<template>
  <cu-layout :navProp="{ placeholder: true }" :bgStyle="{ color: '#ffffff' }">
    <view :class="[`${prefixCls}-search-page-container`]">
      <view class="input-box">
        <uv-input prefixIcon="search" prefixIconStyle="font-size: 22px;color: #909399" placeholder="想住哪儿?" shape="circle" v-model="text" @input.trim="bindKeyInput"></uv-input>
        <uv-button type="plain" @click="handleClose">取消</uv-button>
      </view>
      <view class="input-list" v-if="text">
        <view v-for="(item, index) in searchList" :key="index" class="input-item" @click="handleSelect(item)">
          <view class="detail">
            <uv-icon name="map"></uv-icon>
            <view class="desc">
              <span>{{ item.leftText }}</span>
              <span class="primary">{{ item.centerText }}</span>
              <span>{{ item.rightText }}</span>
            </view>
          </view>
          <view class="address">{{ item.suggestion_format_address }}</view>
        </view>
      </view>
      <!-- 历史记录 -->
      <view class="history-box" v-if="!text && history.length">
        <view class="history-title">
          <text>历史记录</text>
          <uv-icon name="trash" size="20" color="#999" @click="handleClear('history')"></uv-icon>
        </view>
      </view>
      <view class="history-list" v-if="!text && history.length">
        <view class="history-item" v-for="(item, index) in history" :key="index" @click="handleSelect(item)">{{ item.suggestion_search_key }}</view>
      </view>
      <!-- 热门搜索 -->
      <view class="hot-box" v-if="!text && hotList.length">
        <view class="hot-title">
          <text>热门搜索</text>
          <uv-icon name="trash" size="20" color="#999" @click="handleClear('hotList')"></uv-icon>
        </view>
        <view class="hot-list" v-if="!text && hotList.length">
          <view class="hot-item" v-for="(item, index) in hotList" :key="index" @click="handleHousingDetail(item)">{{ item.name }}</view>
        </view>
      </view>
    </view>
  </cu-layout>
</template>

<script>
import { getStorageCache, setStorageCache } from '@/common/cache'
import { mapActions, mapGetters } from 'vuex'
// import debounce from '@/uni_modules/uv-ui-tools/libs/function/debounce.js'
import { matchDetail, searchRecommend } from './api'

export default {
  name: 'searchPage',
  components: {},
  mixins: [],
  props: {},
  data() {
    return {
      text: '',
      history: [],
      hotList: [],
      searchList: [],
    }
  },
  // 侦听属性
  watch: {},
  // 计算属性
  computed: {
    ...mapGetters(['cityConfig', 'locationInfo']),
  },
  // 监听页面加载，该钩子被调用时data,computed,function,watch,props,slots已设置完成
  onLoad(options) {
    const { text } = this.$Route.query
    if (text) {
      this.bindKeyInput()
    }
  },
  // 监听页面显示，页面每次出现在屏幕上都触发
  onShow() {
    this.getData()
  },
  // 监听页面初次渲染完成，此时组件已挂载完成
  onReady() {},
  // 下拉刷新
  onPullDownRefresh() {},
  // 加载更多
  onReachBottom() {},

  created() {},
  mounted() {},
  destroyed() {},
  methods: {
    ...mapActions([]),
    bindKeyInput(e) {
      const { cityId } = this.cityConfig
      const text = e || this.$Route.query.text
      if (!text) return
      uni.$uv.debounce(async () => {
        const { data } = await matchDetail({ cityId, text })
        this.searchList = data.map((v) => {
          const splitText = v.suggestion_search_key.split(text)
          // console.log('splitText', splitText)
          v.leftText = splitText[0]
          v.centerText = text
          v.rightText = splitText[1]
          // console.log('v', v)
          return v
        })
      }, 300)
    },
    // 搜索
    async handleSelect({ suggestion_search_key, suggestion_search_tag_id, suggestion_search_tag, longitude, latitude }) {
      const searchList = (await getStorageCache('history')) || []
      const index = searchList.findIndex((v) => v.suggestion_search_key === suggestion_search_key)
      if (index !== -1) {
        searchList.splice(index, 1)
      }
      searchList.unshift({ suggestion_search_key, suggestion_search_tag_id, suggestion_search_tag, longitude, latitude, auth_location: 1 })
      await setStorageCache('history', searchList)
      // debugger
      this.$ROUTE.go('/pages/subpackage/search-page/list', { suggestion_search_key, longitude, latitude, suggestion_search_tag, auth_location: 1 })
    },
    async getData() {
      const { text } = this.$Route.query
      this.text = text
      const { cityId } = this.cityConfig
      const { latitude, longitude } = this.locationInfo
      const params = {
        cityId,
        latitude,
        longitude,
      }
      const { data } = await searchRecommend(params)
      this.hotList = data.nearby || []
      const history = getStorageCache('history')
      this.history = history
    },
    async handleClear(name) {
      this[name] = []
      if (name === 'history') {
        await setStorageCache('history', [])
      }
    },
    handleClose() {
      uni.navigateBack()
    },
    handleHousingDetail({ id }) {
      this.$ROUTE.go('/pages/subpackage/housing-resources/housing-detail/index', { projectId: id })
    },
  },
}
</script>

<style lang="scss" scoped>
page {
  background: white !important;
}
.#{prefixCls('search-page-container')} {
  width: 100%;
  background: white;
  box-sizing: border-box;
  padding: 0 30rpx;
  .input-box {
    display: flex;
    margin: 30rpx 0;
    ::v-deep .uv-input {
      border-radius: 10rpx !important;
    }
    // .uv-input {
    //   width: 80%;
    //   border-radius: 20rpx;
    // }
    // .uv-button {
    //   width: 20%;
    // }
  }
  .input-list {
    display: flex;
    flex-direction: column;
    margin-top: 40rpx;
    .input-item {
      font-size: 28rpx;
      font-weight: bold;
      color: #222;
      width: 646rpx;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      margin-bottom: 32rpx;
      display: flex;
      flex-wrap: wrap;
      .detail {
        display: flex;
        .desc {
          margin-left: 10rpx;
        }
        .primary {
          color: $uv-primary;
        }
      }
      .address {
        flex-basis: 100%;
        margin-left: 40rpx;
        font-size: 24rpx;
        color: #666;
      }
    }
  }
  .history-box,
  .hot-box {
    margin-top: 50rpx;
    .history-title,
    .hot-title {
      font-weight: bold;
      display: flex;
      justify-content: space-between;
    }
  }
  .history-list,
  .hot-list {
    display: flex;
    flex-wrap: wrap;
    margin-top: 30rpx;
    .history-item,
    .hot-item {
      font-size: 24rpx;
      padding: 10rpx 20rpx;
      background: #f5f5f5;
      margin-right: 20rpx;
      margin-bottom: 20rpx;
      border-radius: 10rpx;
    }
  }
}
</style>
